<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-06-28 09:28:41
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2025-01-08 15:16:02
 * @FilePath: \vue-project\src\views\Common\Login.vue
 * @Description: 
 * 
-->
<template>
  <div class="login_container">
    <Swiper :slides-per-view="1" :autoplay="true" @swiper="onSwiper" @slideChange="onSlideChange">
      <SwiperSlide v-for="item in swipers" :key="item.id">
        <img class="swiper_item_img" :src="item.srcUrl" alt="item.title" />
        <div class="img_bg"></div>
        <p class="img_title">{{ item.title }}</p></SwiperSlide>
    </Swiper>
    <div class="form_container">
      <h2>{{ $t('login.title') }}</h2>
      <password-login />
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import PasswordLogin from './components/PasswordLogin.vue'

//选项卡选中的节点
const swipers = reactive([
  {
    id: 1,
    srcUrl:
      'https://gips1.baidu.com/it/u=2800562849,2956271035&fm=3003&app=3003&f=JPEG?w=4753&h=2726',
    title: '中国·西安',
    desc: '描述'
  },
  {
    id: 2,
    srcUrl: 'https://p9.itc.cn/q_70/images03/20221005/87b4238a8f304dccac0c8102ca9deedc.jpeg',
    title: '中国·宝鸡',
    desc: '描述'
  },
  {
    id: 3,
    srcUrl: 'https://img-xhpfm.zhongguowangshi.com/News/202109/20210915165424_5321.jpg',
    title: '中国·榆林',
    desc: '描述'
  },
  {
    id: 4,
    srcUrl:
      'https://img.sxdaily.com.cn/2024-02/07/10568793_2d86c597-866f-461f-b349-b474592e8574_batchwmcopy.jpg',
    title: '中国·咸阳',
    desc: ''
  },
  {
    id: 5,
    srcUrl:
      'https://pic.rmb.bdstatic.com/bjh/240814/dump/87beb63912c95afae29347480dc6583f.jpeg?x-bce-process=image/watermark,bucket_baidu-rmb-video-cover-1,image_YmpoL25ld3MvNjUzZjZkMjRlMDJiNjdjZWU1NzEzODg0MDNhYTQ0YzQucG5n,type_RlpMYW5UaW5nSGVpU01HQg==,w_67,text_QOWiqOmmmemjn-aXhQ==,size_67,x_51,y_51,interval_2,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1',
    title: '中国·渭南',
    desc: ''
  },
  {
    id: 6,
    srcUrl:
      'https://img1.baidu.com/it/u=322520004,3442065479&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    title: '中国·汉中',
    desc: ''
  },
  {
    id: 7,
    srcUrl:
      'https://img0.baidu.com/it/u=120022408,2642519115&fm=253&fmt=auto&app=120&f=JPEG?w=1542&h=800',
    title: '中国·安康',
    desc: ''
  },
  {
    id: 8,
    srcUrl:
      'https://x0.ifengimg.com/ucms/2024_27/7608F9D137EF77DA456BEF8DAC2C34E00D2455DF_size7266_w3600_h2400.jpg',
    title: '中国·商洛',
    desc: ''
  },
  {
    id: 9,
    srcUrl: 'https://p6.itc.cn/q_70/images03/20210526/62885c3734284290b3734aaf460d1925.jpeg',
    title: '中国·延安',
    desc: ''
  },
  {
    id: 10,
    srcUrl: 'https://p5.itc.cn/q_70/images03/20210624/50edf725e78542358f77d53212c9dd2c.jpeg',
    title: '中国·铜川',
    desc: ''
  }
])

const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {
}
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  position: relative;
  .swiper {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  .swiper_item_img {
    width: 100%;
    height: 100%;
  }
  .img_bg {
    background: rgba(3, 3, 3, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  p.img_title {
    color: #fff;
    position: absolute;
    bottom: 50px;
    left: 100px;
    font-size: 40px;
    font-weight: bold;
    z-index: 2;
  }
  .form_container {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: #fff;
    border-radius: 5px;
    padding: 50px 30px 80px;
    width: 360px;
    h2 {
      margin-bottom: 40px;
      text-align: center;
    }
  }
}
</style>
